<template>
    <div class="public-input-color-picker">
        <el-input v-model="value2" :placeholder="placeholder" @input="_change"></el-input>
        <el-color-picker v-model="value2" :show-alpha="showAlpha" :predefine="predefineColors"
            @change="_change"></el-color-picker>
    </div>
</template>

<script>
/**
 * 输入框颜色选择器
 * ps：预定义颜色中，如果颜色不对，将无法选中
 *
 * @showAlpha 是否支持透明度 默认false
 * @predefineColors 预定义颜色
 * @value 默认颜色编码 示例：#ffffff
 * @placeholder 输入框提示文字
 */
export default {
    name: 'ColorPicker',
    data() {
        return {
            value2: ''
        }
    },
    props: {
        showAlpha: { type: Boolean, default: false },
        predefineColors: {
            type: Array,
            default: () => {
                return [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    '#FF0000'
                ]
            }
        },
        value: { type: String, default: '' },
        placeholder: { type: String, default: '请输入颜色编码' }
    },
    components: {},
    computed: {},
    created() { },
    onload() { },
    onShow() { },
    watch: {
        value: {
            handler: function (newVal, oldVal) {
                this.value2 = JSON.parse(JSON.stringify(newVal))
            },
            immediate: true,
            deep: true
        }
    },
    mounted() { },
    methods: {
        _change(val) {
            if (val) {
                this.$emit('change', val)
                return;
            }
            this.$emit('change', null)
        }
    }
}
</script>

<style scoped>
.public-input-color-picker {
    --box-width: 200px;
    /* display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center; */
    position: relative;
    width: var(--box-width);
}

.el-input {
    width: var(--box-width);
}

.el-color-picker {
    position: absolute;
    right: 0;
}

.el-color-picker__trigger {
    border: 0;
}
</style>